/**
 *  弹窗
 * @author xiaoxujs
 */

import { FC, useCallback, useEffect, useRef, useState } from "react";
import { FormBox, FormItemBox, ModalBox } from "./style";
import SelectTree from "../../../../../components/SelectTree";
import InputX from "../../../../../components/InputX";
import RadioX from "../../../../../components/RadioX";
import { ISelectTreeProps } from "../../../../../type/components";
import { menuTypeArrSelect } from "../../../../../assets/data";
import ButtonX from "../../../../../components/ButtonX";
import { postSyhtMenuAddMenu, postSyhtMenuUpdateMenu } from "../../../../../api/ConfigManagement/menuPageApi";
import { ISyhtMenuGetMenuAllTree } from "../../../../../type/ConfigManagement/MenuPage/api";

const AddChangeModule: FC<{
    open: boolean,
    // moduleClose?: () => void,
    selectTreeList: ISelectTreeProps[],
    onClose: () => void, // 关闭弹窗
    shangjiId?: string // 上级id
    changeData?: ISyhtMenuGetMenuAllTree  // 修改的数据
}> = ({
    open,
    // moduleClose,
    selectTreeList,
    onClose,
    shangjiId,
    changeData
}) => {

        const ModuleBoxRef = useRef<HTMLDivElement>(null); // 弹窗的ref 外层
        const moduleBoxContentRef = useRef<HTMLDivElement>(null); // 弹窗的ref 内层

        const [shangjiMenu, setShangjiMenu] = useState<ISelectTreeProps>(); //上级菜单
        const [menuName, setMenuName] = useState<string>(''); // 菜单名称
        const [menuType, setMenuType] = useState<string>(''); // 菜单类型
        const [perms, setPerms] = useState<string>(''); // 权限标识

        // 点击取消按钮
        const handleCancel = useCallback(
            () => {
                setMenuName('') // 清空菜单名称
                setPerms('') // 清空权限标识
                setShangjiMenu(undefined) // 清空上级菜单
                setMenuType(menuTypeArrSelect[0].value) // 清空菜单类型

            },
            [],
        )
        useEffect(() => {

            if (ModuleBoxRef.current && moduleBoxContentRef.current) {

                ModuleBoxRef.current.addEventListener('click', (event: any) => {
                    if (moduleBoxContentRef.current?.contains(event.target as Node)) {

                    } else {
                        handleCancel();
                        onClose();
                    }
                })
            }
        }, [handleCancel, onClose])
        // 回显
        useEffect(() => {
            const loop = (data: ISelectTreeProps[], shangjiId: string) => {
                data.forEach((item) => {
                    if (item.value === shangjiId) {
                        setShangjiMenu(item)
                    } else {
                        if (item.children) {
                            loop(item.children, shangjiId)
                        }
                    }
                })
            }
            // 回显父级菜单
            if (shangjiId) {
                loop(selectTreeList, shangjiId)
                setMenuType(menuTypeArrSelect[0].value);
            }
            
            if(changeData) { // 修改的数据
                setMenuName(changeData.menuName) // 菜单名称
                setMenuType(changeData.menuType) // 菜单类型
                setPerms(changeData.perms) // 权限标识
                loop(selectTreeList, changeData.parentId)
            }   
        }, [changeData, selectTreeList, shangjiId])



        const handleSelectTreeCallback = (data: ISelectTreeProps) => {
            setShangjiMenu(data)
        }
        // 修改菜单名称
        const handleChangeMenuName = (value: string) => {
            setMenuName(value);
        }
        // 修改菜单类型
        const handleChangeMenuType = (value: string) => {
            setMenuType(value);
        }
        // 修改权限标识
        const handleChangePerms = (value: string) => {
            setPerms(value);
        }
        // 点击确定按钮
        const handleSumber = async () => {
            if ( menuName && menuType && perms) {
                if(changeData) { // 修改的数据
                    // const params = 
                    const params = {
                        menuId: changeData.menuId, // 菜单ID
                        parentId: shangjiMenu? shangjiMenu.value : '0', // 上级菜单ID
                        menuName: menuName, // 菜单名称
                        menuType: menuType, // 菜单类型 0 目录 1 菜单 2 按钮
                        perms: perms // 权限标识
                    }

                    const {code, msg } = await postSyhtMenuUpdateMenu(params) as { code: number, msg: string }; // 修改菜单
                    if (code === 200) {
                        alert('菜单修改成功')
                        handleCancel(); // 清空数据
                        onClose(); // 关闭弹窗 
                    }else{
                        alert(msg)
                    }
                }else{
                    const params = {
                        parentId: shangjiMenu ? shangjiMenu.value : '0', // 上级菜单ID
                        menuName: menuName, // 菜单名称
                        menuType: menuType, // 菜单类型 0 目录 1 菜单 2 按钮
                        perms: perms // 权限标识
                    }
                    const { code, msg } = await postSyhtMenuAddMenu(params) as { code: number, msg: string }; // 新增菜单
                    if (code === 200) {
                        alert('菜单添加成功')
                        handleCancel(); // 清空数据
                        onClose(); // 关闭弹窗
                    } else {
                        alert(msg)
                    }
                }
               
            } else {
                alert('请完善信息')
            }
        }


        return <ModalBox ref={ModuleBoxRef} open={open}>
            <div ref={moduleBoxContentRef} className="modal-content" >
                <div className="modal-header">
                    <div className="modal-title">添加</div>
                    <span className="guanbi" aria-hidden="true" onClick={() => {
                           handleCancel()
                           onClose();
                    }}>&times;</span>
                </div>
                <div className="modal-body">
                    <FormBox>
                        <FormItemBox>
                            <div className="form_title_box">上级菜单</div>
                            <SelectTree value={shangjiMenu} onChange={handleSelectTreeCallback} selectTreeList={selectTreeList} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">菜单名称</div>
                            <InputX value={menuName} onChange={handleChangeMenuName} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">菜单类型</div>
                            <RadioX name="menuType" options={menuTypeArrSelect} onChange={handleChangeMenuType} />
                        </FormItemBox>
                        <FormItemBox>
                            <div className="form_title_box">权限标识</div>
                            <InputX value={perms} onChange={handleChangePerms} />
                        </FormItemBox>
                    </FormBox>
                </div>
                <div className="modal-footer">
                    <div style={{ marginRight: '2rem' }}>
                        <ButtonX type="info" onClick={() => {
                            handleCancel()
                            onClose();
                        }}>取消</ButtonX>
                    </div>
                    <ButtonX type='primary' onClick={() => handleSumber()}>确定</ButtonX>
                </div>
            </div>
        </ModalBox>
    }

export default AddChangeModule;